<template>
    <layout title="核酸上门采样服务-支付详情">
        <div class='wrapper'>
            <div class="current-detail">
                <div class="title">
                    当前成团信息
                </div>
                <van-cell-group>
                    <van-cell title="成团号：" :value="dataInfo.collageId"></van-cell>
                    <van-cell title="项目名称：" :value="dataInfo.itemName"></van-cell>
                    <van-cell title="成团人数：" :value="dataInfo.userMin"></van-cell>
                    <van-cell title="采样时间：" :value="dataInfo.applyTime"></van-cell>
                    <van-cell title="截止时间：" :value="dataInfo.endTime"></van-cell>
                    <van-cell class="price" title="项目单价: ￥" :value="dataInfo.itemPrice"></van-cell>
                    <van-cell title="详细地址：" :value="dataInfo.address"></van-cell>
                    <van-cell title="发起人：" :value="dataInfo.linkMan"></van-cell>
                    <van-cell title="手机号：" :value="dataInfo.linkPhone"></van-cell>
                    <van-cell title="拼团状态：" :value="formatCollageState(dataInfo.collageState)"></van-cell>
                </van-cell-group>
            </div>
            <div class="pay-detail">
                <div class="title">
                    拼团支付信息
                </div>
                <van-cell-group>
                    <van-cell title="姓名：" :value="dataInfo.payLinkMan"></van-cell>
                    <van-cell title="手机号：" :value="dataInfo.payLinkPhone"></van-cell>
                    <van-cell title="检验人数：" :value="dataInfo.payUserNum"></van-cell>
                    <van-cell class="price" title="付款金额： ￥" :value="dataInfo.payAmount"></van-cell>
                    <van-cell title="付款时间：" :value="dataInfo.payTime"></van-cell>
                    <van-cell class="price" title="退款金额： ￥" :value="dataInfo.refundAmount"></van-cell>
                    <van-cell title="退款时间：" :value="dataInfo.refundTime"></van-cell>
                    <van-cell class="price" title="实际付款： ￥" :value="dataInfo.realAmount"></van-cell>
                    <van-cell title="详细地址：" :value="dataInfo.payAddress"></van-cell>
                    <van-cell title="采样状态：" :value="formatSampleState(dataInfo.sampleState)"></van-cell>
                    <van-cell title="支付状态：" :value="formatPayState(dataInfo.payState)"></van-cell>
                </van-cell-group>
            </div>

        </div>
    </layout>
    
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import groupPayInfoApi from '@/api/groupPayInfo'
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            dataInfo:"",
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        init(){
            // if(this.$route.query.id){
                this.getInfo()
            // }
        },
        getInfo(){
            let params = {
                id:this.$route.query.id||false
            }
            groupPayInfoApi.getInfo(params)
                .then(res=>{
                    if(res.status==0){
                        if(res.data){
                            this.dataInfo = res.data
                        }else{
                            this.$toast({
                                type:"fail",
                                message:"页面加载失败请重试"
                            })
                        }
                    }else{
                        this.$dialog.alert({
                            title:"提示",
                            message:res.msg
                        })
                    }
                })
        },
        formatCollageState(val){
            switch(val){
                case 1:
                    return "拼团中"
                case 2:
                    return "已成团" 
                case 3:
                    return "已结束"
                case 4:
                    return "已取消"
                default:
                    return ""
            }
        },
        formatSampleState(val){
            if(val==0) return "未采样"
            if(val==1) return "已采样"
        },
        formatPayState(val){
            switch(val){
                case 1:
                    return "未支付"
                case 5:
                    return "已付定金" 
                case 6:
                    return "已付尾款"
                case 7:
                    return "已付款"
                case 11:
                    return "待退差价"
                case 12:
                    return "已退差价"
                case 14:
                    return "待退款"
                case 15:
                    return "已退款"
                case 20:
                    return "已取消"
                default:
                    return ""
            }
        },

    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init()
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
    .wrapper{
        width: 93%;
        margin: auto;
        .current-detail,.pay-detail{
            box-shadow: 0 0 12px rgba(0,0,0,10%);
            overflow: hidden;
            border-radius: 10px;
            background-color: white;
            margin: 10px 0 20px 0;
            .price{
                .van-cell__value{
                    color: red;
                }
            }
            .title{
                padding: 10px 0;
                font-size: 15px;
                font-weight: 700;
                color: #07C060;
                text-align: center;
            }
        }
    }
</style>